<template>
	<view v-if="show" class="detail-content-view">
		<view class="content-view">
			<view class="question-list">
				<view>1.您的性别是：</view>
				<u-radio-group wrap size="20" v-model="value1">
					<u-radio name="1" icon-size="12" label-size="22">
						男
					</u-radio>
					<u-radio name="2" icon-size="12" label-size="22">
						女
					</u-radio>
				</u-radio-group>
			</view>
			<view class="question-list">
				<view>1.您的年龄是：</view>
				<u-radio-group wrap size="20" v-model="value2">
					<u-radio name="1" icon-size="12" label-size="22">
						18岁以下
					</u-radio>
					<u-radio name="2" icon-size="12" label-size="22">
						18-34岁
					</u-radio>
					<u-radio name="3" icon-size="12" label-size="22">
						34-54岁
					</u-radio>
					<u-radio name="4" icon-size="12" label-size="22">
						55岁以上
					</u-radio>
				</u-radio-group>
			</view>
			<view class="question-list">
				<view>1.您品骏每周阅读书籍的时长为：</view>
				<u-radio-group wrap size="20" v-model="value3">
					<u-radio name="1" icon-size="12" label-size="22">
						少于1小时
					</u-radio>
					<u-radio name="2" icon-size="12" label-size="22">
						1-3小时
					</u-radio>
					<u-radio name="3" icon-size="12" label-size="22">
						3-5小时
					</u-radio>
					<u-radio name="4" icon-size="12" label-size="22">
						5小时以上
					</u-radio>
				</u-radio-group>
			</view>
			<view class="question-list">
				<view>1.您最常阅读的书类别是：</view>
				<u-radio-group wrap size="20" v-model="value4">
					<u-radio name="1" icon-size="12" label-size="22">
						小说类(如文学、科幻、恐怖等)
					</u-radio>
					<u-radio name="2" icon-size="12" label-size="22">
						非小说类（如历史、科学、自助等）
					</u-radio>
					<u-radio name="3" icon-size="12" label-size="22">
						新闻杂志或报纸
					</u-radio>
				</u-radio-group>
			</view>
			<view class="complete-view" @tap.stop="close">完成</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['show'],
		data(){
			return { 
				value1: '1',
				value2: '1',
				value3: '1',
				value4: '1'
			}
		},
		methods: {
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style scoped>
	.detail-content-view {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, .2);
		position: fixed;
		left: 0;
		top: 0;
	}

	.content-view {
		width: 300px;
		height: 500px;
		background-color: #fff;
		padding: 30px;
		display: flex;
		flex-direction: column;
		position: relative;
		font-size: 22rpx;
	}
	.question-list {
		line-height: 40rpx;
		margin-top: 20rpx;
	}
	.complete-view {
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: blue;
		color: #fff;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}
</style>